<template>
    <keep-alive>
    <div v-if='goodList.length>0'>
        <div class="banner">
            <img src="@/product/productbanner.png"/>
        </div>
        <div class="wrapper">
            <div class="floor1">
                <div class="name">
                    <span>
                        <img src="@/product/hot.png"/>
                    </span>
                </div>
                <div class="floorBox1">
                    <div class="leftImg">
                        <router-link :to="{path:'/details',query:{id:goodList[0].id}}">
                            <img :src="goodList[0].pic1" />
                            <div class="content">
                                <span>{{goodList[0].name}}</span>
                                <span>￥{{goodList[0].price}}</span>
                            </div>
                        </router-link>
                    </div>
                    <div class="rightImg">
                        <ul>
                            <li v-for="(item,index) of goodList[1]" :key="index">
                                <router-link :to="{path:'/details',query:{id:item.id}}">
                                    <img :src="item.pic1"/>
                                    <div class="content">
                                        <span v-cloak>{{item.name}}</span>
                                        <span>￥{{item.price}}</span>
                                    </div>
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="floor2">
                <div class="name">
                    <span>
                        <img src="@/product/new.png"/>
                    </span>
                </div>
                    <div class="midBanner">
                        <img src="@/product/banner1.png"/>
                    </div>
            </div>
            <div class="floor3">
                <div class="floor3-top">
                    <div class="topPart">
                        <router-link :to="{path:'/details',query:{id:goodList[2][0].id}}">
                            <img :src='goodList[2][0].pic1'/>
                            <div class="content">
                                <span>{{goodList[2][0].name}}</span>
                                <span>￥{{goodList[2][0].price}}</span>
                            </div>
                        </router-link>
                    </div>
                    <div class="topPart">
                        <router-link :to="{path:'/details',query:{id:goodList[2][1].id}}">
                            <img :src='goodList[2][1].pic1'/>
                            <div class="content">
                                <span>{{goodList[2][1].name}}</span>
                                <span>￥{{goodList[2][1].price}}</span>
                            </div>
                        </router-link>
                    </div>
                </div>
                <div class="floor3-bottom">
                    <div class="leftpart">
                        <div class="lefthalf">
                            <div class="lhPart">
                                <router-link :to="{path:'/details',query:{id:goodList[2][2].id}}">
                                    <img :src='goodList[2][2].pic1'/>
                                    <div class="content">
                                        <span>{{goodList[2][2].name}}</span>
                                        <span>￥{{goodList[2][2].price}}</span>
                                    </div>
                                </router-link>
                            </div>
                            <div class="lhPart">
                                <router-link :to="{path:'/details',query:{id:goodList[2][3].id}}">
                                    <img :src='goodList[2][3].pic1'/>
                                    <div class="content">
                                        <span>{{goodList[2][3].name}}</span>
                                        <span>￥{{goodList[2][3].price}}</span>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                        <div class="rhPart">
                            <router-link :to="{path:'/details',query:{id:goodList[2][4].id}}">
                                <img :src='goodList[2][4].pic1'/>
                                <div class="content">
                                    <span>{{goodList[2][4].name}}</span>
                                    <span>￥{{goodList[2][4].price}}</span>
                                </div>
                            </router-link>
                        </div>
                    </div>
                    <div class="rightpart">
                        <div class="bottomPart">
                            <router-link :to="{path:'/details',query:{id:goodList[2][5].id}}">
                                <img :src='goodList[2][5].pic1'/>
                                <div class="content">
                                    <span>{{goodList[2][5].name}}</span>
                                    <span>￥{{goodList[2][5].price}}</span>
                                </div>
                            </router-link>
                        </div>
                        <div class="bottomPart">
                            <img src="@/product/chair.png"/>
                        </div>
                        <div class="bottomPart">
                            <img src="@/product/mirror.png"/>
                        </div>
                        <div class="bottomPart">
                            <router-link :to="{path:'/details',query:{id:goodList[2][6].id}}">
                                <img :src='goodList[2][6].pic1'/>
                                <div class="content">
                                    <span>{{goodList[2][6].name}}</span>
                                    <span>￥{{goodList[2][6].price}}</span>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </keep-alive>
</template>

<script>
export default {
    data(){
        return{
            goodList:[]
        }
    },
    created(){
        this.axios({
            url:`${this.$config.dataUrl}/api/v1/contents1/hot`,
            method:'get'
        }).then(res=>{
            var k=Math.ceil(res.data.data.length/12)
            var arr=[]
            for(var i=0;i<res.data.data.length;i+=k){
                arr.push(res.data.data[i])
            }
            this.goodList.push(arr[0],arr.slice(1,5),arr.slice(5,12))
        })
    },
}
</script>


<style lang="scss" scoped>
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin imgStyle($w,$h){
        width : #{$w};
        height: #{$h};
        img{
            width  : 100%;
            height : 100%;
            display: block;
        }
    }
    @mixin nameStyle($w,$h){
        .name{
            width        : 100%;
            margin-bottom: 0.5rem;
            display      : flex;
            span{
                display: inline-block;
                margin : 0 auto;
                @include imgStyle($w,$h);
            }
        }
    }
    @mixin priceStyle ($h1,$h2,$h3){
        position: relative;
        .content{
            position  : absolute;
            bottom    : 0;
            font-size : 0.18rem;
            background: rgba($color: #ffffff, $alpha: 0.8);
            width     : 100%;
            height    : #{$h1}rem;
            span{
                width      : 100%;
                text-align : center;
                display    : block;
                height     : #{$h2}rem;
                line-height: #{$h2}rem;
                &:nth-child(2){
                    height     : #{$h3}rem;
                    line-height: #{$h3}rem
                }
            }
        }
    }
    @mixin goodstrans{
        &:hover{
            overflow: hidden;
            img{
                transform : scale(1.1,1.1);
                transition: all 0.5s;
            }
        }
    }

    .banner{
        margin-bottom: 0.46rem;
        @include imgStyle(100%,10.85rem);
    }
    .wrapper{
        width   : 12rem;
        margin  : 0 auto;
        position: relative;
        @include clearfix();
         a{
            color: #666
        }
    }
    .floor1{
        @include nameStyle(2.85rem,0.52rem);
        margin-bottom: 0.5rem;
        .floorBox1{
            display: flex;
            .leftImg{
                @include imgStyle(6rem,5.53rem);
                @include priceStyle(0.89,0.26,0.22);
                @include goodstrans();
                .content{
                    padding: 0.22rem 0;
                }
            }
            .rightImg{
                width : 6rem;
                height: 5.53rem;
                ul{
                    padding-inline-start: 0;
                    display             : flex;
                    flex-wrap           : wrap;
                }
                li{
                    list-style   : none;
                    margin-left  : 0.2rem;
                    margin-bottom: 0.19rem;
                    &:nth-child(3){
                        margin-bottom: 0;
                    };
                    &:nth-child(4){
                        margin-bottom: 0;
                    };
                    @include goodstrans();
                    @include imgStyle(2.8rem,2.67rem);
                    @include priceStyle(0.51,0.29,0.21);
                }
            }
        }
    }
    .floor2{
        @include nameStyle(2.85rem,0.52rem);
        .midBanner{
            @include imgStyle(100%,3.03rem);
        }
        margin-bottom: 0.4rem;
    }
    .floor3{
        margin-bottom: 1.38rem;
        .floor3-top{
            display      : flex;
            margin-bottom: 0.2rem;
        }
        .topPart{
            @include imgStyle(5.91rem,2.72rem);
            @include priceStyle(0.57,0.28,0.22);
            @include goodstrans();
            margin-left: 0.18rem;
            &:first-child{
                margin-left: 0;
            }
        }
        .floor3-bottom{
            display: flex;
        }
        .leftpart{
            display     : flex;
            margin-right: 0.18rem;
            .lefthalf{
                margin-right: 0.2rem;
                .lhPart{
                    @include imgStyle(3.13rem,2.59rem);
                    @include priceStyle(0.51,0.26,0.21);
                    @include goodstrans();
                    &:first-child{
                        margin-bottom: 0.21rem;
                    }
                }
            }
            .rhPart{
                @include imgStyle(2.58rem,5.39rem);
                @include priceStyle(0.51,0.26,0.21);
                @include goodstrans();
            }
        }
        .rightpart{
            display  : flex;
            flex-wrap: wrap;
            .bottomPart{
                @include imgStyle(2.85rem,2.6rem);
                @include priceStyle(0.51,0.26,0.21);
                &:nth-child(1){
                    @include goodstrans();
                }
                &:nth-child(4){
                    @include goodstrans();
                }
            }
        }
    }
</style>
